<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      提现
    </view>
    <view class="" style="padding-top: 88rpx">
      <view class="content">
        <view class="addCard">
          <view class="lef">到账方式</view>
          <view class="righ">
            <text>提现至微信零钱</text>
            <image class="img" src="../../../static/x92.png" mode="" />
          </view>
        </view>
        <view class="box">
          <view class="title">
            <image class="img1" src="../../../static/dz1.png" mode="" />
            您的提现金额</view
          >
          <view class="inputs">
            <input
              type="number"
              v-model="money"
              placeholder="请输入您的提现金额"
            />
          </view>
        </view>
        <view class="btn" @click="withdraw">提现</view>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="boxs">
        <view class="selectPopup_one">
          <image
            src="../../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="close"
          ></image>
          <text style="margin: 0 auto">选择到账银行卡</text>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view
            class="pop_two"
            v-for="(item, i) in cardList"
            :key="i"
            @click="checkBank(item, i)"
          >
            <view class="left">
              <image class="img" :src="item.image" mode="" />
              <view class="col">
                <text>{{ item.bank_name }}</text>
                <text>2小时内到账</text>
              </view>
            </view>
            <image
              v-if="i == active"
              class="img"
              src="../../../static/check.png"
              mode=""
            />
          </view>
          <navigator url="../Addbankcard/Addbankcard" class="Addbankcard">
            <view class="useNew">
              <view class="lef">
                <image class="img" src="../../../static/newCar.png" mode="" />
                <text>使用新卡提现</text>
              </view>
              <image class="img" src="../../../static/x92.png" mode="" />
            </view>
          </navigator>
        </scroll-view>
        <view class="pbtn" @click="close">确定</view>
      </view>
    </uni-popup>
    <!-- 交易密码弹窗 -->
    <uni-popup ref="popPasword" type="bottom">
      <view class="boxs boxss">
        <view class="selectPopup_one">
          <image
            src="../../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="close"
          ></image>
          <text style="margin: 0 auto">请输入支付密码</text>
        </view>
        <validcode
          ref="pwd"
          :maxlength="6"
          :isPwd="true"
          @finish="getPwd"
        ></validcode>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      toView: "",
      obj: {},
      cardList: [],
      zxList: [],
      active: 0,
      userName: "", // 开户人姓名
      card: "", // 银行卡号
      money: "", // 提现金额
      type: "", // 提现类型:1=余额,2=佣金
      payPassword: "",
    };
  },
  onLoad(e) {
    this.type = e.type;
  },
  onShow() {
    this.token = uni.getStorageSync("token");
    if (this.token) {
      this.myWallet();
      // this.getcardList();
    }
  },
  methods: {
    gobackClick() {
      uni.switchTab({
        url: "../users",
      });
    },
    // 我的钱包
    async myWallet() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/myWallet",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {},
      });
      if (res.data.code == 1) {
        that.obj = res.data.data;
      }
    },
    // 获取银行卡数据
    async getcardList() {
      const res = await this.$myRequest({
        url: "bank/getBankCard",
        method: "POST",
        data: {},
      });
      if (res.data.code == 1) {
        this.cardList = res.data.data;
        this.zxList = this.cardList[0];
        this.userName = this.cardList[0].user_name;
        this.card = this.cardList[0].card_num.replace(/\s+/g, "");
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    // 提现
    async withdraw() {
      if (this.money == "") {
        uni.showToast({
          title: "请输入提现金额",
          icon: "none",
        });
        return;
      }
      this.openPasw();
    },
    // 密码输入完成
    getPwd(val) {
      this.withd(val);
    },
    async withd(val) {
      const res = await this.$myRequest({
        url: "pay/withdraw",
        method: "POST",
        data: {
          money: this.money,
          type: this.type,
          payPassword: val,
        },
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
        this.close();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    // 选择银行卡
    checkBank(item, i) {
      this.active = i;
      this.userName = item.user_name;
      this.card = item.card_num.replace(/\s+/g, "");
    },
    open() {
      this.$refs.popup.open();
    },
    openPasw() {
      this.$refs.popPasword.open();
    },
    close() {
      this.$refs.popup.close();
      this.$refs.popPasword.close();
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  min-height: 100vh;
  position: relative;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  width: 100%;
  min-height: 60vh;
  box-sizing: border-box;
  padding: 30rpx;
  .addCard {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .lef {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
    }
    .righ {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #333;
      .bankcard {
        display: flex;
        align-items: center;
        color: #333333;
        font-weight: normal;
        .img {
          display: block;
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }
      }
      > .img {
        display: block;
        width: 12rpx;
        height: 20rpx;
        margin-left: 30rpx;
      }
    }
  }
  .sped {
    width: 100%;
    box-sizing: border-box;
    padding-right: 30rpx;
    text-align: right;
    font-size: 28rpx;
    color: #999999;
    margin-top: 10rpx;
  }
  .box {
    width: 100%;
    height: 286rpx;
    background: #ffffff;
    border-radius: 22rpx;
    overflow: hidden;
    .title {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 36rpx;
      margin-top: 70rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      .img1 {
        display: block;
        width: 26rpx;
        height: 26rpx;
        margin-right: 15rpx;
      }
    }
    .inputs {
      width: 590rpx;
      border-bottom: 1px solid #eee;
      padding: 0 0 15rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 35rpx auto;
      input {
        flex: 1;
        box-sizing: border-box;
        padding: 0 20rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #333;
      }
    }
  }
  .btn {
    width: 250rpx;
    height: 66rpx;
    background: #c52b2e;
    border-radius: 33px;
    text-align: center;
    line-height: 66rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 100rpx auto;
  }
}
.boxs {
  width: 100%;
  height: 500rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  &.boxss {
    height: 500rpx;
    .selectPopup_one {
      margin-bottom: 100rpx;
    }
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #eee;
    .clos {
      width: 24rpx;
      position: relative;
      left: 30rpx;
    }
  }
  .scroll-y {
    height: 400rpx;
  }
  .pop_two {
    width: 690rpx;
    height: 100rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    .left {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      .col {
        text {
          display: block;
        }
      }
    }
    > .img {
      display: block;
      width: 34rpx;
      height: 34rpx;
    }
  }
  .useNew {
    width: 690rpx;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    .lef {
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 47rpx;
        height: 31rpx;
        margin-right: 30rpx;
      }
      text {
        color: #333333;
      }
    }
    > .img {
      display: block;
      width: 12rpx;
      height: 20rpx;
    }
  }
  .pbtn {
    width: 300rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #c52b2e;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 100rpx auto 0;
  }
}
</style>
